import React, { useRef } from 'react';
import {Button, message, Form, Input, Select} from 'antd';
import {
  DrawerForm
} from '@ant-design/pro-form';
import './index.less'
import { request } from 'umi';



export default (props: any) => {
  const formRef = useRef();

  return (
    <DrawerForm<{
      qcNames: [];
      productName: string;
    }>
      title={props.name}
      formRef={formRef}
      trigger={
        <Button type="primary" key="primary" >
          {props.name}
        </Button>
      }
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        console.log(values)
        await request('/api/dataSource/create', {
          method: 'POST',
          data:values,
          skipErrorHandler: true,

        }).then( res => {
          if (res.code === 200){
            message.success(res.message);
            // props.refreshInit()
          }else {
            message.error(res.data.errMsg);
          }
        });
        // 不返回不会关闭弹框
        return true;
      }}
    >

      <Form.Item
        label="数据库类型"
        name="driver"
        rules={[{ required: true}]}
      >
        <Select
          placeholder="请选择"
          allowClear
        >
          <Select.Option value="mysqli">Mysql</Select.Option>
          <Select.Option value="Sql Server" disabled>Sql Server</Select.Option>
          <Select.Option value="sqlite" disabled>sqlite</Select.Option>
          <Select.Option value="Oracel" disabled>Oracel</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item name="host" label="地址" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item name="database" label="数据库" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

    </DrawerForm>
  );
};
